<template>
	<el-dialog v-model="dialogVisible" title="分配菜单" width="30%">
		<el-tree
			ref="treeRef"
			:data="menu"
			@check="handleNodeClick"
			show-checkbox
			default-expand-all
			node-key="path"
			highlight-current
			:props="defaultProps"
			:default-checked-keys="checkedKeys"
		/>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirm">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import router from '@/router';
const defaultProps = {
	children: 'children',
	label: 'name',
	disabled: 'disabled'
};
const dialogVisible = ref(false);
const menu = ref(router);
const checkedKeys = ref([]);// 全选中

const allCheckedKeys = ref([]) // 全选中 + 半选中
const treeRef = ref(null);
//@ts-ignore
const handleNodeClick = (data, checked) => {
	//@ts-ignore
	checkedKeys.value = checked.checkedKeys;// 全选中
	//@ts-ignore
	allCheckedKeys.value = [...checked.checkedKeys,...checked.halfCheckedKeys] // 全选中 + 半选中
	console.log('allCheckedKeys.value',allCheckedKeys.value);
};

const showModal = () => {
	dialogVisible.value = true;
};

const confirm = () => {
	dialogVisible.value = false;
	// checkedKeys.value（后端存储，用作分配菜单时回显，当前角色已选中的菜单的数组）
	// allCheckedKeys.value（后端存储，用户登录后返回的可访问的菜单权限数组）
	//接口请求...

}
defineExpose({
	showModal
});
</script>
<style scoped></style>
